<template>
  <div>
    <div class="top_panel">
      <el-form :model=searchFormData label-width="60px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="标题" prop="titleFuzzy">
              <el-input clearable @keyup.enter.native="loadDataList" placeholder="请输入名称"
                v-model="searchFormData.titleFuzzy">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态" prop="status">
              <el-select :style="{ width: '100%' }" v-model="searchFormData.status" clearable placeholder="请选择状态">
                <el-option :value="0" label="草稿"></el-option>
                <el-option :value="1" label="已发布"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="分类" prop="categoryId">
              <el-select :style="{ width: '100%' }" v-model="searchFormData.categoryId" clearable placeholder="请选择分类">
                <el-option v-for="item in categoryList" :key="item.id" :value="item.categoryId"
                  :label="item.categoryName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :style="{ 'padding-left': '10px' }">
            <el-button type="danger" @click="loadDataList">搜索</el-button>
            <el-button type="danger" @click="showEdit('add')">新增博客</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Table :columns="columns" :showPagination="true" :dataSource="tableData" :fetch="loadDataList"
      :options="tableOptions">
      <!-- 封面 -->
      <template #cover="{ index, row }">
        <Cover :cover="row.cover"></Cover>
      </template>
      <!-- 文章信息 -->
      <template #blogInfo="{ index, row }">
        <div>标题，{{ row.title }}</div>
        <div>分类，{{ row.categoryName }}</div>
        <div>作者，{{ row.nickName }}</div>
      </template>
      <!-- 类型 -->
      <template #typeName="{ index, row }">
        <div>类型:
          <span v-if="row.type == 0">原创</span>
          <span v-if="row.type == 1">转载</span>
        </div>
        <div v-if="row.type == 1"> 转载地址:{{ row.reprintUrl }}</div>
      </template>

      <!-- 状态 -->
      <template #statusName="{ index, row }">
        <span v-if="row.status === 1" :style="{ color: 'green' }">{{ row.statusName }}</span>
        <span v-else :style="{ color: 'red' }">{{ row.statusName }}</span>
      </template>

      <!-- 时间 -->
      <template #time="{ index, row }">
        <div>创建时间：{{ row.createTime }}</div>
        <div>更新时间：{{ row.lastUpdateTime }}</div>
      </template>

      <template #op="{ index, row }">
        <div class="op">
          <a href="javascript:void(0)" @click="showEdit('update', row)" class="a-link" v-if="userInfo.userId == row.userId">修改</a>
          <span v-else> -- </span>
          <el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="delBlog(row)" class="a-link" v-if="userInfo.userId == row.userId">删除</a>
          <span v-else> -- </span>
          <el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" class='a-link' @click="showDetail(row.blogId)">预览</a>
          <el-divider direction="vertical"></el-divider>
        </div>
      </template>
    </Table>
    <BlogEdit ref="blogEditRef" @callBack="loadDataList"></BlogEdit>


    <BlogDetail ref="blogDetailRef"></BlogDetail>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
import BlogEdit from './BlogEdit.vue'
import BlogDetail from './BlogDetail.vue'
const { proxy } = getCurrentInstance();

const userInfo = ref(proxy.VueCookies.get('userInfo') || {})

const api = {
  'loadCategory': 'category/loadAllCategory4Blog',
  'loadDataList': 'blog/loadBlog',
  'delBlog': 'blog/recoveryBlog'
}


const searchFormData = reactive({})
const categoryList = ref([])

const loadCategory = async () => {
  let res = await proxy.Request({
    url: api.loadCategory,
  })
  categoryList.value = res.data
}
loadCategory();

// 列表
const columns = [{
  label: '封面',
  prop: 'cover',
  width: 80,
  scopedSlots: 'cover'
},
{
  label: '文章信息',
  prop: 'blogInfo',
  scopedSlots: 'blogInfo'
},
{
  label: '编辑器',
  prop: 'editorTypeName',
  width: 100,
},
{
  label: '类型',
  prop: 'typeName',
  width: 200,
  scopedSlots: 'typeName'
},
{
  label: '评论',
  prop: 'allowCommentTypeName',
  width: 100,
},
{
  label: '状态',
  prop: 'status',
  width: 100,
  scopedSlots: 'statusName'

}, {
  label: '时间',
  prop: 'time',
  width: 300,
  scopedSlots: 'time'
}, {
  label: '操作',
  prop: 'op',
  width: 200,
  scopedSlots: 'op'
},
]
const windowConfig = reactive({
  show: false,
  buttons: [
    {
      type: 'danger',
      text: '确定',
      click: () => {
        closeWindow();
      },
    },
  ],
});
const tableData = reactive({})
const tableOptions = {
  exHeight: 50,
}
const loadDataList = async () => {
  let params = {
    pageNo: tableData.pageNo,
    pageSize: tableData.pageSize
  }

  Object.assign(params, searchFormData)

  let res = await proxy.Request({
    url: api.loadDataList,
    params
  })
  if (!res) {
    return
  }
  Object.assign(tableData, res.data)
}


const closeWindow = () => {
  windowConfig.show = false;
  loadDataList()
}

const blogEditRef = ref(null)
const showEdit = (type, data) => {
  blogEditRef.value.init(type, data)
}

// 删除博客
const delBlog = (data) => {
  proxy.Confirm(`你确定要删除【${data.title}】吗？`, async () => {
    let res = await proxy.Request({
      url: api.delBlog,
      params: {
        blogId: data.blogId
      }
    })
    if (!res) {
      return;
    }
    loadDataList();
  })
}


const blogDetailRef = ref(null)
const showDetail = (blogId) => {
  blogDetailRef.value.showDetail(blogId)
}

</script>

<style lang="scss"></style>